/*
 * @Author: xinyang3
 * @Date: 2021-07-20 10:19
 * @Descripttion: v-model的双向绑定
 * @LastEditors: xinyang3
 * @LastEditTime: 2021-07-20 11:10
 */
const app = Vue.createApp({
  data() {
    return {
      bar: 'hello world..'
    }
  }
});

// 传递了一个是属性 prop foo，另一个是事件更新
// 自定义修饰符相当于添加了一个prop
app.component('custom-events-model', {
  props: {
    foo: String,
    fooModifiers: {
      default: () => {}
    }
  },
  created() {
    console.log(this.fooModifiers);
  },
  methods: {
    emitValue(e) {
      let value = e.target.value;
      if (this.fooModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1);
      }
      this.$emit('update:foo', value);
    }
  },
  template: `
    <input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)">
    <input type="text" :value="foo" @input="emitValue">
  `
});

app.mount('#app');